@base-bg-color: #f5f6f7;
@white: #ffffff;
@tagcolor: #007bff, #28a745, #dc3545, #6c757d, #ffc107, #17a2b8, #343a40;

.main {
  width: 100%;
  height: 100%;

  .flex {
    justify-content: space-between;
  }

  .container {
    .left {
      width: 73%;
      position: relative;

      .top {
        padding: 20px;
        height: 80px;
        border-bottom: 1px solid #f8f8f8;

        &:after {
          position: absolute;
          width: 100px;
          height: 1px;
          background: #ed4040;
          content: "";
          top: 120px;
          right: 0;
        }

        .title {
          text-align: center;
          font-size: 35px;
        }

        .article-info {
          display: flex;
          flex-wrap: wrap;

          .info-list {
            width: 100%;
            height: 25px;
            line-height: 25px;
            font-size: 14px;
            display: flex;
            justify-content: space-around;
          }

        }
      }

      .content {
        padding: 20px;

        .tag {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;

          a {
            display: inline-block;
            background-color: #F4F5F6;
            color: #fff;
            margin-right: 5px;
            padding: 2px 10px;
            font-size: 12px;
            line-height: 18px;
            height: 18px;

            &:hover {
              background-color: #333333 !important;
              color: @white;
            }

          }
        }

        each(@tagcolor, .(@k,@v,@i) {
          .tag a:nth-child(7n+@{i}) {
            background-color: @k;
          }
        })

        .bottom {
          display: flex;
          justify-content: center;
          align-items: center;
        }

      }

      .comment {
        padding: 5px 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        div {

        }
      }

      .other-article {
        display: flex;
        justify-content: space-between;
        padding: 5px 20px;
        height: 45px;
        line-height: 45px;

        a {
          &:hover {
            color: #2D93CA;
          }
        }
      }

      .comment-box {
        padding: 5px 20px;
        display: flex;
        justify-content: flex-end;
        flex-wrap: wrap;

        textarea {
          width: 100%;
          overflow: hidden;
          resize: none;
          line-height: 1.7;
          font-size: 100%;
          padding: 10px 15px;
          border: 1px solid #c6c8ce;
          -webkit-appearance: none;
          background: #fff;
          -webkit-border-radius: 3px;
          -moz-border-radius: 3px;
          border-radius: 3px;
          -moz-background-clip: padding;
          -webkit-background-clip: padding-box;
          background-clip: padding-box;
          -webkit-box-shadow: 0 0 8px rgba(182, 195, 214, .6) inset, 0 1px 1px #fff;
          -moz-box-shadow: 0 0 8px rgba(182, 195, 214, .6) inset, 0 1px 1px #fff;
          box-shadow: 0 0 8px rgba(182, 195, 214, .6) inset, 0 1px 1px #fff;
          -webkit-transition-duration: 300ms;
          -moz-transition-duration: 300ms;
          -o-transition-duration: 300ms;
          -ms-transition-duration: 300ms;
          transition-duration: 300ms;
          -webkit-transition-easing: ease-in-out;
          -moz-transition-easing: ease-in-out;
          -o-transition-easing: ease-in-out;
          -ms-transition-easing: ease-in-out;
          transition-easing: ease-in-out;
          -webkit-transition-property: border-color, -webkit-box-shadow;
          -webkit-transition-property: border-color, box-shadow;
          -moz-transition-property: border-color, -moz-box-shadow;
          -moz-transition-property: border-color, box-shadow;
          -o-transition-property: border-color, box-shadow;
          -ms-transition-property: border-color, box-shadow;
          transition-property: border-color, box-shadow
        }

        button {

        }
      }

      .all-comment {
        .comment-list {
          padding: 10px 20px;
          border-bottom: 1px #f7f7f7 solid;
          margin-bottom: -1px;
          overflow: hidden;
          position: relative;

          .comment-user {
            clear: both;

            .avatar {
              display: block;
              overflow: hidden;
              width: 50px;
              height: 50px;
              float: left;
              margin-right: 25px;
              border-radius: 50%;

              img {
                width: 50px;
                height: 50px;
                -webkit-transition: all 0.3s;
                -moz-transition: all 0.3s;
                -o-transition: all 0.3s;
                transition: all 0.3s;

                &:hover {
                  -webkit-transform: scale(1.1);
                  -moz-transform: scale(1.1);
                  -o-transform: scale(1.1);
                  -ms-transform: scale(1.1);
                  transform: scale(1.1);
                }
              }
            }

            .user-info {
              display: block;
              overflow: hidden;
              box-sizing: border-box;

              .nickname {
                font-size: 14px;
                padding-bottom: 5px;
                color: #339b53;
                font-weight: 600;
              }

              .comment-content {
                overflow: hidden;
                font-size: 12px;
                color: #333333;
                line-height: 22px;
                word-wrap: break-word;
              }

              .comment-bottom {
                .reply, .like, .comment-time {
                  line-height: 25px;
                  height: 25px;
                  margin-right: 15px;
                  cursor: pointer;
                }
              }
            }
          }

          .children {
            padding-left: 75px;
            padding-top: 15px;

            .reply-list {
              border-top: 1px solid #f8f8f8;
              margin-top: -1px;
              padding: 15px 0;

              .avatar {
                float: left;
                width: 50px;
                height: 50px;
                overflow: hidden;
                margin-right: 10px;
                border-radius: 50%;

                img {
                  width: 50px;
                  height: 50px;
                  -webkit-transition: all 0.3s;
                  -moz-transition: all 0.3s;
                  -o-transition: all 0.3s;
                  transition: all 0.3s;

                  &:hover {
                    -webkit-transform: scale(1.1);
                    -moz-transform: scale(1.1);
                    -o-transform: scale(1.1);
                    -ms-transform: scale(1.1);
                    transform: scale(1.1);
                  }
                }
              }

              .reply-content {
                display: block;
                overflow: hidden;
                box-sizing: border-box;

                .name {
                  display: inline-block;
                  font-size: 14px;
                  padding-bottom: 5px;
                  color: #339b53;
                  font-weight: 600;
                }
              }

              .content-bottom {
                .reply, .like, .reply-time {
                  line-height: 25px;
                  height: 25px;
                  margin-right: 15px;
                  cursor: pointer;
                }
              }
            }
          }
        }

        .nomore {
          padding: 15px;
          line-height: 25px;
          text-align: center;
          vertical-align: center;
        }
      }
    }

    .right {
      width: 25%;
    }
  }
}
